<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul,li {
				list-style: none;
			}
			
			ul {
				width: 800px;
				height: 400px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.v-list li {
				display: none;
			}
			
			.active {
				display: block !important;
			}
			
			.btn li {
				float: left;
				width: 50%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
				background: #ccc;
			}
			.on {
				background: red !important;
			}
		</style>
	</head>
	<body>
		<ul class="v-list">
			<li class="active">
				<video width="800" height="400" controls="controls" loop="loop">
					<source src="1" type="video/mp4" data-src ="video/GENERATIONS from EXILE TRIBE - BIG CITY RODEO.mp4" ></source>
				</video>
			</li>
			<li>
				<video width="800" height="400" controls="controls" loop="loop">
					<source src="" type="video/mp4" data-src ="video/shou.mp4" ></source>
				</video>
			</li>
		</ul>
		<ul class="btn">
			<li class="on">1</li>
			<li>2</li>
		</ul>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.btn li').click(function(){
				var num = $(this).index();
				$(this).addClass('on').siblings().removeClass('on');
//				$('.v-list li').eq(num).addClass('active').siblings().removeClass('active');
				$('.v-list li').eq(num).children('source').attr("src","video/shou.mp4");
			});
		})
		
	</script>
</html>
